import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link} from 'react-router';

import './waitlist.scss';
class WaitOne extends React.Component {
  render() {
     if(this.props.data){
         return (
             <li className="media">
                 <div className="media-left">
                     <span className={'wait-status '+(this.props.auctioning?'auctioning':'')}>{this.props.auctioning?'拍卖中':(this.props.willauction?'待拍':'完结')}</span>
                     <a href="#">
                         <img className="media-object car-thumb" src={this.props.data.thumb_url ? CBH.imgUploadPath +'/data/upload/'+ this.props.data.thumb_url : ''} alt=""/>
                     </a>
                 </div>
                 <div className="media-body">
                     <p>{this.props.data.title}</p>
                     <p>起拍价 :
                         <span>{this.props.data.start_price?this.props.data.start_price:'无'}</span>
                     </p>
                     <p>{this.props.data.mileage?this.props.data.mileage+'万公里 / ':''} {this.props.data.pub_date?this.props.data.pub_date+'上牌 / ':''} {this.props.data.emission_standards}</p>
                     <div className="row">
                         <div className="col-xs-12" style={{
                             paddingRight: 0
                         }}>
                             {this.props.data.graphic? <a className="list-page-info-link" href='+this.props.data.graphic+' >查看图文介绍</a>:''}
                         </div>
                     </div>
                 </div>
             </li>
         );
     }else {
         return (<li></li>);
     }
  }
}
class WaitList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        data:[],
        auctioned:[],
        adata: {},
        auctioning:0
    };
  }
    componentWillMount() {
      $.ajax({
          'type': 'POST',
          'async': false,
          'url': CBH.apiRoot + '/?g=Api&m=ActivityProduct&a=allwait&tp=1',
          'dataType': 'jsonp',
          success: function (res) {
              console.log(res);
              this.setState(res);
          }.bind(this)
      });
    }
  render() {
      var auctioningItem = (()=>
            <WaitOne auctioning={1} data={this.state.auctioning} />)


      let willAuctionPorducts = this.state.data.map((carItem, i)=>
              <WaitOne auctioning={0} willauction={1} key={carItem.id} data={carItem}/>
          )

      let auctionedProducts = this.state.auctioned.map((carItem, i)=>
              <WaitOne auctioning={0} willauction={0} key={carItem.id} data={carItem}/>
          )

    return (
      <div className="container">
        <div className="row">
          <div>
            <section className="wait-list-page">
              <div className="row">
                <div className="col-xs-12">
                  <ul className="media-list car-list-info">
                      <WaitOne auctioning={1} data={this.state.auctioning} />
                      {auctioningItem}
                    </ul>

                    <ul className="media-list car-list-info">
                        {willAuctionPorducts}
                        {auctionedProducts}

                  </ul>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    );
  }
}
export default WaitList;
